<template>
	<div class="wrap">
		<div class="loginBox">
			<div class="img-wrap">
				<img src="../../public/img/login.png" alt="">
			</div>
			<div class="form-wrap">
				<h2>后台管理</h2>
				<el-input v-model="username" placeholder="请输入账号"></el-input>
				<el-input v-model="password" placeholder="请输入密码"></el-input>
				<el-button type="primary" @click="loginFn">登录</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import user from "@/api/user";
	
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			loginFn(){
				let obj = {
					username: this.username,
					password: this.password,
				}
				user.loginData(obj).then(res=>{
					// console.log(res)
					this.$store.commit("setToken",res.data.data.token)
					this.$store.commit("setUsername",this.username)
					this.$router.push("/home/homeView")
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {margin: 0;padding: 0;}
	.wrap {
		display: flex;
		width: 100%;
		height: 100vh;
		justify-content: center;
		align-items: center;
		background-image: url("../../public/img/bg-login.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		.loginBox {
			width: 800px;
			height: 460px;
			border-radius: 10px;
			box-shadow: -3px 5px 8px 0 #777;
			background-color: #fff;
			display: flex;
			.img-wrap {
				box-sizing: border-box;
				width: 480px;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 400px;
				}
			}
		}
		.form-wrap {
			box-sizing: border-box;
			padding-top: 50px;
			width: 320px;
			text-align: center;
			h2 {
				display: block;
				font-size: 1.5em;
				margin-block-start: 0.83em;
				margin-block-end: 0.83em;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				font-weight: bold;
			}
			.el-input {
				width: 280px;
				margin: 15px 0;
			}
			.el-button {
				width: 280px;
				margin-top: 5px;
			}
		}
	}
</style>